import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:get/route_manager.dart';
import 'package:shudu/utils/global.dart';
import 'package:shudu/utils/history_model.dart';
import 'package:shudu/utils/image_utils.dart';
import 'package:shudu/viewmodel/history_viewmodel.dart';
import 'package:shudu/widget/appbar_widget.dart';

class HistoryPage extends StatelessWidget {
  final HistoryViewModel _viewModel = Get.put(HistoryViewModel());

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          AppbarWidget("历史记录"),
          Obx(() => Expanded(
              child: _viewModel.records.isEmpty
                  ? const Center(
                      child: Text(
                        "无历史记录",
                        style: TextStyle(
                            color: Colors.black, fontSize: 17),
                      ),
                    )
                  : ListView(
                      padding: const EdgeInsets.symmetric(horizontal: 15),
                      children: _viewModel.records
                          .map((element) => _itemWidget(element))
                          .toList(),
                    )))
        ],
      ),
    );
  }

  Widget _itemWidget(HistoryModel model) {
    return Container(
      padding: const EdgeInsets.symmetric(horizontal: 10),
      margin: const EdgeInsets.only(top: 15),
      height: 62,
      decoration: BoxDecoration(
          color: Colors.white, borderRadius: BorderRadius.circular(8)),
      child: Row(
        children: [
          Column(
            mainAxisSize: MainAxisSize.min,
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Text(
                model.level ?? "",
                style: const TextStyle(
                    color: Colors.black, fontSize: 14),
              ),
              const SizedBox(
                height: 5,
              ),
              Text(timeStr(model.time ?? 0),
                  style: const TextStyle(
                      color: Color.fromRGBO(166, 166, 166, 1),
                      fontSize: 12))
            ],
          ),
          const Spacer(),
          loadAssetImage("icon_time", width: 16),
          const SizedBox(
            width: 2,
          ),
          Text(
            "用时 ${durationStr(model.duration ?? 0)}",
            style: const TextStyle(
                color: Color.fromRGBO(48, 125, 246, 1),
                fontSize: 12),
          )
        ],
      ),
    );
  }
}
